<nav id="id-sidebar" class="st-sidebar" [ngClass]="{ toggled: toggled, 'sidebar-bg': hasBackgroundImage }">
  <article class="st-sidebar_main">
    <perfect-scrollbar [config]="config">
      <!--header-->
      <header class="st-sidebar_header">
        <a href="javascript:;">Pro Sidebar</a>
        <i class="fa fa-angle-double-left" (click)="toggleSidebar()"></i>
      </header>
      <!--header-->
      <main class="st-sidebar_menu">
        <ul>
          <li
            *ngFor="let menu of data"
            [ngClass]="{ active: menu.active, 'sidebar-dropdown': menu.type === 'dropdown', 'header-menu': menu.type === 'header' }"
          >
            <!--标题-->
            <span *ngIf="menu.type === 'header'">{{ menu.title }}</span>
            <!--标题-->

            <a *ngIf="menu.type !== 'header'" href="javascript:;" (click)="toggle(menu)">
              <i class="{{ menu.icon }}"></i>
              <span>{{ menu.title }}</span>
              <!-- <span *ngIf="menu.badge" class="badge badge-pill" [ngClass]="menu.badge.class">{{ menu.badge.text }}</span>-->
            </a>

            <div *ngIf="menu.type === 'dropdown'" class="sidebar-submenu" [@slide]="getState(menu)">
              <ul>
                <li *ngFor="let submenu of menu.submenus" [ngClass]="{ active: submenu.active }">
                  <a href="javascript:;" (click)="onMenuClick(submenu, menu)">
                    {{ submenu.title }}
                    <!--                    <span *ngIf="submenu.badge" class="badge badge-pill" [ngClass]="submenu.badge.class">{{ submenu.badge.text }}</span>-->
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </main>
    </perfect-scrollbar>
  </article>
</nav>
